import React, { Component, Fragment } from 'react';
import { Layout, Menu, Icon, Dropdown, Avatar, Badge } from 'antd'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { getNotificationList } from '../../store/actions/notifications'
import { logout } from '../../store/actions/user'
import { changeLang } from '../../store/actions/lang'
import logo from './logo.svg'
import zh_CN from 'antd/es/locale/zh_CN';
import en_US from 'antd/es/locale/en_US';


const { Header } = Layout

const mapState = state => {
  return {
    notificationsCount: state.notifications.list.filter(item => item.hasRead === false).length,
    avatar: state.user.avatar,
    displayName: state.user.displayName,
    lang: state.lang.locale
  }
}

@withRouter
@connect(mapState, { getNotificationList, logout, changeLang })

class AdminHeader extends Component {
  componentDidMount() {
    console.log('frame:', this.props)
    this.props.getNotificationList()
  }

  onDropDownMenuClick = ({ key }) => {
    // console.log(key)
    if (key === '/logout') {
      this.props.logout()
    } else {
      this.props.history.push(key)
    } 
  }

  // 需要动态改变的内容可以写成方法
  renderDropdown = () => (
    <Menu onClick={this.onDropDownMenuClick}>
      <Menu.Item key="/admin/notifications" >
        <Badge dot={Boolean(this.props.notificationsCount)}>
          通知中心
        </Badge>
      </Menu.Item>
      <Menu.Item key="/admin/profile" >
        个人设置
      </Menu.Item>
      <Menu.Item key="/logout" >
        退出登录
      </Menu.Item>
    </Menu>
  );

  // 选择语言
  selectLang = ({ key }) => {
    console.log(key)
    // 可用的语言选项
    const locales = {
      "zh_CN": zh_CN,
      "en_US": en_US
    }
    this.props.changeLang(locales[key])
  }

  // 需要动态改变的内容可以写成方法
  langDropdown = () => (
    <Menu onClick={this.selectLang}>
      <Menu.Item key="zh_CN" >
        中文
      </Menu.Item>
      <Menu.Item key="en_US" >
        English
      </Menu.Item>
    </Menu>
  );


  render() {
    return (
      <Fragment>
        <Header className="qf-header" >
          <div className="qf-logo" >
            <img src={logo} alt="logo" />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between'}}>
          <Dropdown overlay={this.langDropdown} >
            <div>
              <Icon type="font-size" style={{ fontSize: '20px', padding: '25px' }} />
            </div>
          </Dropdown>

          <Dropdown overlay={this.renderDropdown} trigger={['click']}>
            <div>
              <Avatar src={this.props.avatar} />
              <span style={{ padding: '0 10px'}}> 欢迎你！{this.props.displayName} </span>
              <Badge count={this.props.notificationsCount} offset={[-10,-10]}>
                <Icon type="down" />
              </Badge>
            </div>
          </Dropdown>
          </div>
        </Header>
      </Fragment>
    );
  }
}

export default AdminHeader;
